<template>
  <q-dialog v-model="show" persistent>
    <q-card v-drag class="dialog-content" style="min-width: 1000px; max-height: 500px">
      <q-card-section class="dialog-title bg-primary" >
        <div class="text-center text-white dialog-title">
<!--          <q-btn-->
<!--            style="font-size: 18px;color: white"-->
<!--            flat round dense-->
<!--            class="iconfont icontubiao-67 white close-btn"-->
<!--            @click="$emit('close')"-->
<!--          >-->
<!--          </q-btn>-->
          <span class="font-size-16" v-if="type == 'operator'">
            批量解绑操作员
          </span>
          <span v-else-if="type == 'technician'">
            批量解绑技术员
          </span>
        </div>
      </q-card-section>
      <q-card flat class="my-card detail" style="margin: 20px 15px">
        <q-card-section class="dialog-title bg-primary details dialog-title">
          <span class="text-white font-size-16">
            所选设备
          </span>
        </q-card-section>

        <q-card-section class="bordered" style="padding: 10px 10px">
          <q-scroll-area :thumb-style="thumbStyle" style="height: 80px">
            <div class="sel-item"  v-for="(item,index) in batchUnbund" :key="index">
              <div class="flex justify-between items-center">
                <div class="txt font-size-16">
                  {{item.deviceName}}（{{item.assetNumber}}）
                </div>
                <q-icon @click.stop="delItem(index)" class="close fr font-size-16" name="iconfont icontubiao-89" />
              </div>
            </div>
          </q-scroll-area>
        </q-card-section>
      </q-card>
      <div class="form-inline">
        <q-select
          class="select"
          outlined dense emit-value map-options options-dense
          :options="shiftsList"
          v-model="shift"
          style="margin: 0 auto"
        >
          <template v-slot:no-option>
            <div class="no-option"/>
          </template>
          <template v-slot:before>
            <span class="form-name">轮班:</span>
          </template>
        </q-select>
      </div>
      <!-- 底部按钮 -->
      <q-separator />
      <div class="dialog-footer text-center margin-t-10">
        <q-btn outline label="取消" color="primary" @click="$emit('close')" class="q-mr-md"/>
        <q-btn unelevated label="确认" color="primary" @click="submit" :disable="batchUnbund.length == 0"/>
      </div>
    </q-card>
  </q-dialog>
</template>

<script>

import { batchUnbind } from '../../../boot/job/man-machine-bind'

export default {
  name: 'batch-unbundling',
  props: {
    show: {
      type: Boolean,
      default: false,
      required: true
    },
    batchUnbund: {
      default: [],
      required: false
    },
    type: {
      type: String,
      default: '',
      required: true
    },
    shiftsList: {
      required: true
    }
  },
  data () {
    return {
      thumbStyle: this.CommonConfig.thumbStyle, // 滚动条样式
      // form 正在提交
      isSubmitting: false,
      shift: 'all' // 轮班下拉选中项
    }
  },
  watch: {
    show: function (newVal) {
      this.shift = 'all'
    }
  },
  methods: {
    // 删除所选设备
    delItem (index) {
      this.$q.dialog({
        title: `<p class="dialog-notice-title"><i class="iconfont icontubiao-28"></i>
          确定删除该所选设备吗？</p>`,
        html: true,
        ok: {
          unelevated: true,
          label: '确认'
        },
        cancel: {
          unelevated: true,
          outline: true,
          label: '取消'
        }
      })
        .onOk(() => {
          this.batchUnbund.splice(index, 1)
        })
    },
    // 提交
    submit () {
      let params = {
        userType: this.type
      }
      let shiftIds = []
      if (this.shift === 'all') {
        this.shiftsList.forEach(i => {
          if (i.value !== 'all') {
            shiftIds.push(i.value)
          }
        })
      } else {
        shiftIds.push(this.shift)
      }
      params.shiftIds = shiftIds
      let deviceIds = []
      this.batchUnbund.forEach(i => {
        deviceIds.push(i.deviceId)
      })
      params.deviceIds = deviceIds
      let label = '是否解绑所选设备'
      if (this.type === 'operator') {
        label += '操作员？'
      } else if (this.type === 'technician') {
        label += '技术员？'
      }
      console.log(params, '参数')
      this.$q.dialog({
        title: `<p class="dialog-notice-title"><i class="iconfont icontubiao-28"></i>${label}</p>`,
        html: true,
        ok: {
          unelevated: true,
          label: '确认'
        },
        cancel: {
          unelevated: true,
          outline: true,
          label: '取消'
        }
      })
        .onOk(() => {
          batchUnbind(params).then(res => {
            if (res.code === '1200') {
              this.$emit('close')
              this.$emit('getBindingList')
              this.$message.success('批量解绑成功')
            }
          })
        })
    }
  }
}
</script>

<style scoped lang="stylus">
  .font-size-16 {
    font-size 16px
  }
  .font-size-14 {
    font-size 14px
  }
  .bordered,.bordered:last-child {
    border-bottom  1px
    border-top 0
    border 1px solid #D3D3D3
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
  }
  .details{
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    padding 0 24px
  }
  .dialog-title .close-btn{
    position absolute
    right 0
  }
  .item{
    background-color $secondary !important
  }
  >>>.q-chip__icon--remove{
    content 'iconfont icontubiao-89'
  }
  .cursor-move{
    cursor move
  }
  .sel-item{
    display inline-block
    min-width 100px
    background-color $secondary
    color #fff
    padding 4px 8px
    border-radius 6px
    margin-bottom 10px
    margin-right 10px
    .close{
      margin-left 10px
      opacity .6
    }
    .close:hover{
      opacity 1
    }
  }&.sel-item:first-child{
     margin-left 0
  }
</style>
